.info-notice-wrapper {
  display: flex;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  justify-content: center;
  height: 100px;
}

.info-notice {
  white-space: nowrap;
  user-select: none;
  background: $gray-5;
  color: white;
  border-radius: 8px;
  height: 32px;
  box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.4),
    inset 0 0 0 0.5px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  @include label-normal;
  bottom: 48px;
  animation: popup 2s;

  .x-button {
    margin-right: 6px;
  }

  p {
    margin: 0 12px;
  }
}

@keyframes popup {
  from {
    transform: translateY(100px);
  }

  20% {
    transform: translateY(0px);
  }

  to {
    transform: translateY(0px);
  }
}

@mixin bevel-button($color, $text-color: white) {
  color: $text-color;
  @include label-normal;
  background: linear-gradient($color, darken($color, 4%));
  border: none;
  border-radius: 4px;
  box-shadow: inset 0 0 0 0.5px darken($color, 10%),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.5), 0 0.5px 1px 0 rgba(0, 0, 0, 0.15);

  letter-spacing: 0.5px;
  &:active {
    background: darken($color, 8%);
    box-shadow: none;
  }
}

.bevel-button {
  @include bevel-button($blue);
}
